<template>
	<view class="order-detail">
		<view class="address-info">
			<!-- 完善用户信息 -->
			<view class="authentication">
				<view>
					<u-toast ref="uToast" />
				</view>
				<view class="form">
					<view class="userinfo">
						<view class="user-address">
							<view class="icon">
								<image src="../../static/icon/xcx/address.png" mode="widthFix"></image>
							</view>
							<view class="address-title">
								收获地址
							</view>
						</view>
						<label>
							<view class="title">
								联系人
							</view>
							<view class="field">
								<u-input v-model="harvestName" type="text"
									placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="例:张三"
									:clearable="false" input-align="right"></u-input>

							</view>
						</label>
						<label>
							<view class="title">
								联系电话
							</view>
							<view class="field">
								<u-input v-model="mobile" maxlength="19" type="text"
									placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="例:150..."
									:clearable="false" input-align="right"></u-input>

							</view>
						</label>


						<view class="uni-list-cell">
							<view class="uni-list-cell-left">
								所属地区
							</view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" @columnchange="columnchange" :range="array"
									range-key="name" :value="value" mode="multiSelector">
									{{address}}
								</picker>
							</view>

						</view>
						<label>
							<view class="title">
								收获地址
							</view>
							<view class="field">
								<u-input v-model="detailAddress" maxlength="19" type="text"
									placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="例:北京..."
									:clearable="false" input-align="right"></u-input>
							</view>
						</label>
						<view class="tip">
							注：部分商品偏远地区可能会产生附加邮费
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order" v-for="order in orderList" :key="order.id">
				<view class="pro-title">
					<view class="icon">
						<image src="../../static/icon/xcx/order.png" mode="widthFix"></image>
					</view>
					<view class="title">
						商品信息
					</view>
				</view>
				<view class="order-content">
					<view class="order-num">
						订单编号：{{order.id}}
					</view>
					<view class="order-list">
						<view class="order-item" v-for="pro in order.proList" :key="pro.uuid">
							<view class="p-img">
								<image :src="pro.image" mode="widthFix"></image>
							</view>
							<view class="p-info">
								<view class="title">
									{{pro.title}}
								</view>
								<view class="guige">
									{{pro.format}}
								</view>
								<view class="remark">
									{{pro.remark}}
								</view>
								<view class="price-box">
									<view class="ptice">
										￥{{(pro.sellPrice / 100).toFixed(2)}}
									</view>
									<view class="count">
										×{{pro.count}}件
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="total">
						<view class="count">
							共计3件商品
						</view>
						<view class="price">
							订单金额：￥{{totalPrice(order.proList)}}
						</view>

						<view class="circle left">

						</view>
						<view class="circle right">

						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="btn">
			<view class="submit" @click="submit">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLocalData,
		setLocalData
	} from "@/util/localStroage.js"
	import request from '@/util/request.js'
	import {
		phoneValidator
	} from '@/util/validator.js'
	import AllAddress from '@/data.js'
	let selectVal = ['', '', '']

	export default {
		data() {
			return {
				orderId: '',
				address: '请选择所在地区',
				value: [0, 0, 0],
				array: [],
				index: 0,
				harvestName: '',
				mobile: '',
				detailAddress: '',
				postCountyCode: '',
				orderList: [] // 订单数据
			}
		},
		methods: {
			totalPrice(list) {
				//list 订单商品列表
				let price = 0
				list.forEach(pro => {
					price += pro.sellPrice * pro.count
				})
				if (price > 0) {
					return (price / 100).toFixed(2)
				}
				return '0.00'

			},
			show(title, type, callback) {
				this.$refs.uToast.show({
					title,
					type: type ? type : "default",
					duration: 1000,
					position: "top",
					callback: callback ? callback : () => {}
				})
			},
			// 获取用户信息
			getUserInfo() {
				request.globalRequest({
					url: "/api/member/user/info",
					headers: {
						userType: "MEMBER"
					}
				}).then(res => {
					if (res.status == "login") {
						return uni.navigateTo({
							url: "/pages/login/login"
						})
					}
					this.address = res.postProvince + '/' + res.postCity + '/' + res.postCounty
					this.detailAddress = res.postAddress
					this.harvestName = res.postName
					this.mobile = res.postPhone
				})
			},
			submit() {
				if (this.name == "") {
					return this.show("真实姓名不能为空~")
				}
				if (this.harvestName == "") {
					return this.show("收获人姓名不能为空~")
				}
				if (this.mobile == "") {
					return this.show("联系电话不能为空~")
				}
				if (this.address == "请选择所在地区") {
					return this.show("请选择所属地区~")
				}
				if (this.detailAddress == "") {
					return this.show("收货地址不能为空~")
				}
				if (!phoneValidator(this.mobile, this.show)) {
					return
				}
				let data = getLocalData('orderList')
				data.forEach(item => {
					if (item.id == this.orderId) {
						item.status = 2
					}
				})
				setLocalData("orderList", data)
				this.show("支付成功", "success", () => {
					uni.redirectTo({
						url: "/pages/orders/orders?status=0"
					})
				})
			},
			// 初始化地址选项
			initSelect() {
				this.updateSourceDate() // 更新源数据
					.updateAddressDate() // 更新结果数据
					.$forceUpdate() // 触发双向绑定
			},
			// 地址控件改变控件
			columnchange(d) {
				this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
					.updateSourceDate() // 更新源数据
					.updateAddressDate() // 更新结果数据
					.$forceUpdate() // 触发双向绑定
			},

			/**
			 * 更新源数据
			 * */
			updateSourceDate() {
				this.array = []
				this.array[0] = AllAddress.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[1] = AllAddress[this.value[0]].cityList.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[2] = AllAddress[this.value[0]].cityList[this.value[1]].areaList.map(obj => {
					return {
						name: obj.name
					}
				})
				return this
			},

			/**
			 * 更新索引
			 * */
			updateSelectIndex(column, value) {
				let arr = JSON.parse(JSON.stringify(this.value))
				arr[column] = value
				if (column === 0) {
					arr[1] = 0
					arr[2] = 0
				}
				if (column === 1) {
					arr[2] = 0
				}
				this.value = arr
				return this
			},

			/**
			 * 更新结果数据 
			 * */
			updateAddressDate() {
				selectVal[0] = this.array[0][this.value[0]].name
				selectVal[1] = this.array[1][this.value[1]].name
				selectVal[2] = this.array[2][this.value[2]].name
				return this
			},

			/**
			 * 点击确定
			 * */
			bindPickerChange(e) {
				this.address = selectVal.join('/')
				selectVal[2]
				AllAddress.some(pro => {
					if (pro.name == selectVal[0]) {
						pro.cityList.some(city => {
							if (city.name == selectVal[1]) {
								city.areaList.some(area => {
									if (area.name == selectVal[2]) {
										this.postCountyCode = area.code
										return true
									}
								})
								return true
							}
						})
						return true
					}
				})
				return this
			},
			// 获取订单数据
			requestOrderInfo() {
				const routes = getCurrentPages()
				this.orderId = routes[0].$route.query.id
				this.orderList = getLocalData("orderList").filter(order => order.id == this.orderId && order.status == 1)
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		created() {

			this.initSelect()
			this.requestOrderInfo()

		}
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		padding-bottom: 80rpx;

		.address-info {
			.authentication {
				padding: 0 20rpx;

				.form {
					padding: 20rpx 20rpx 30rpx;
					background-color: #fff;

					.userinfo {

						.user-address {
							display: flex;
							align-items: center;
							padding-bottom: 20rpx;


							.icon {
								margin-right: 10rpx;
								width: 32rpx;

								image {
									width: 100%;
								}
							}

							.address-title {
								font-weight: 600;
								font-size: 30rpx;
								transform: translateY(-4rpx);
							}
						}

						.uni-list-cell {
							display: flex;
							color: #666666;
							font-size: 24rpx;
							padding: 20rpx;
							border-bottom: 1px solid #f1f1f1;
							justify-content: space-between;
							margin-bottom: 20rpx;
						}

						label {
							display: flex;
							border-bottom: 1px solid #f1f1f1;
							justify-content: space-between;
							margin-bottom: 20rpx;

							.title {
								font-size: 24rpx;
								color: #666666;
								padding: 20rpx;
								margin-right: 30rpx;
							}

							.field {
								flex: 1;
							}
						}
					}

					.tip {
						color: red;
						padding: 0 20rpx;
						font-size: 24rpx;
					}
				}
			}
		}

		.order-info {
			padding: 20rpx;

			.order {
				padding: 20rpx 0;
				background-color: #fff;
				margin-top: 20rpx;

				.pro-title {
					padding: 0 20rpx;
					display: flex;
					align-items: center;

					.icon {
						width: 28rpx;
						margin-right: 10rpx;

						image {
							width: 100%;
						}
					}

					.title {
						font-size: 30rpx;
						font-weight: 600;
						transform: translateY(-4rpx);
					}
				}

				.order-content {
					margin-top: 10rpx;
					padding: 0 20rpx;


					.order-num {
						color: #333;
						font-size: 26rpx;
						padding: 10rpx 0;
					}

					.order-list {

						.order-item {
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;
							padding: 10rpx 0 30rpx;


							.p-img {
								width: 120rpx;


								image {
									border: 1px solid #ccc;
									width: 100%;
									border-radius: 10rpx;
								}
							}

							.p-info {
								flex: 1;
								margin-left: 20rpx;

								.title {
									color: #333;
									font-weight: 600;
									font-size: 24rpx;
								}

								.guige {
									font-size: 24rpx;
									color: #777;
								}

								.remark {
									color: #FFA200;
									font-weight: 600;
									font-size: 24rpx;
									padding: 5rpx 0;
								}

								.price-box {
									display: flex;
									justify-content: space-between;
									align-items: center;
									background-color: #eee;
									padding: 10rpx 10rpx 10rpx 0;
									border-radius: 10rpx;



									.ptice {

										color: red;
										font-size: 24rpx;
										font-weight: 700;
									}

									.count {
										color: #333;
										font-size: 24rpx;
									}
								}
							}
						}
					}

					.total {
						border-top: 1px solid #ccc;
						position: relative;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20rpx 20rpx 0;

						.count {
							color: #777;
							font-size: 24rpx;
							padding: 20rpx 0;
						}

						.price {
							color: red;
							font-weight: 700;
							font-size: 24rpx;
							padding: 20rpx 0;
						}

						.circle {
							position: absolute;
							top: -20rpx;
							width: 40rpx;
							height: 40rpx;
							border-radius: 999rpx;
							background-color: #f1f1f1;
						}

						.left {
							left: -40rpx;
						}

						.right {
							right: -40rpx;
						}
					}
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 80rpx;
			padding: 10rpx 20rpx;
			background-color: #fff;
			z-index: 999;

			.submit {
				border-radius: 999rpx;
				color: #fff;
				font-size: 24rpx;
				height: 100%;
				line-height: 60rpx;
				text-align: center;
				background-color: #FFA200;
			}
		}
	}
</style>
